<template>
  <div class="video">
    <template v-if="formData.advancedConfig?.urlList.length">
      <template v-if="fileType === 'audio'">
        <audio
          controls
          autoplay
          width="100%"
          height="100%"
          preload="metadata"
          style="background: #000"
          ref="playRef"
        >
          <source :src="src" :type="mime" />
        </audio>
      </template>
      <template v-if="fileType === 'video'">
        <video
          controls
          autoplay
          width="100%"
          height="100%"
          preload="metadata"
          style="background: #000"
          ref="playRef"
        >
          <source :src="src" :type="mime" />
        </video>
      </template>
    </template>
    <template v-else>
      <div class="center">
        {{ formData.name }}
      </div>
    </template>
  </div>
</template>
<script setup>
import { watch, ref, toRefs } from 'vue'
import { getFileType, getMIME } from '../../utils'
let props = defineProps({
  formData: {
    type: Object,
    default: () => {},
  },
})
let playRef = ref()
let fileType = ref(null)
let src = ref()
let mime = ref()
let { formData } = toRefs(props)
watch(
  () => formData.value.advancedConfig.urlList,
  newValue => {
    if (newValue && newValue.length) {
      fileType.value = getFileType(newValue[0].url)
      src.value = newValue[0].url
      mime.value = getMIME(newValue[0].url)
      if (playRef.value) {
        playRef.value.load()
        playRef.value.play()
      }
    }
  },
  {
    deep: true,
    immediate: true,
  },
)
</script>
<style scoped>
.video {
  width: 100%;
  height: 100%;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
